<nz-layout class="app-layout">
  <!-- menu -->
  <nz-sider class="menu-sidebar" [nzWidth]="siderWidth" #siderDom>
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img [src]="ngLogoImg" alt="logo" />
        <span>NG-ZORRO</span>
      </a>
      <a href="https://www.lodashjs.com/" target="_blank">
        <img [src]="lodashLogoImg" alt="logo" />
        <span>Lodash</span>
      </a>
    </div>
    <ul
      nz-menu
      nzMode="inline"
      *ngFor="let item of routeConfig; index as i; trackBy: trackFn"
    >
      <li nz-submenu>
        <span title class="menu">
          <span class="menu-icon" nz-icon [nzIconfont]="item.icon"></span>
          <span class="first-menu">{{ item.title }}</span></span
        >
        <ul *ngFor="let val of item.childRoute">
          <li nz-menu-item (click)="hideAnimationAndChooseTool(val)">
            <span class="second-menu">{{ val.exhibitStr }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>

  <!-- 拖拽 -->
  <div class="drag-icon" draggable="true" (dragend)="dragEnd($event)" #dragIcon>
    <svg class="icon zuoyouhuadong" aria-hidden="true">
      <use xlink:href="#icon-tuozhuai-copy"></use>
    </svg>
  </div>
  <!-- 主体 -->
  <nz-layout class="body">
    <nz-header>
      <div class="left-layout">
        <button
          id="goBack"
          nz-button
          nzType="default"
          nzShape="circle"
          (click)="goBack()"
        >
          <i nz-icon nzType="left" nzTheme="outline"></i>
        </button>
        <nz-select
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="🔎 输入关键词进行查找"
          [(ngModel)]="selectedValue"
          [nzOptions]="listOfGroupOption"
          (ngModelChange)="search($event)"
        ></nz-select>
      </div>
      <div class="right-layout">
        <h3>
          <!-- emoji表情组件 -->
          <app-eye-emoji></app-eye-emoji>
          &nbsp;&nbsp;请打开控制台查看效果&nbsp;&nbsp;
          <span class="menu-icon" nz-icon [nzIconfont]="'icon--happy-1'"></span>
        </h3>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <ng-container [ngTemplateOutlet]="open" *ngIf="isIndex"></ng-container>
        <!-- 渲染视图组件-->
        <app-render [renderData]="toolsData" *ngIf="!isIndex"></app-render>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>

<ng-template #open>
  <app-open-animation></app-open-animation>
</ng-template>
